<template>
  <div style="background-color: aquamarine">
    <h3>v-model父子组件双向绑定</h3>
    <p>msg:{{ msg }}</p>
    <p>count:{{ count }}</p>
    <!-- 这个是v-model中vue2在组件上绑定的本质 -->
    <!-- <Child1 :value="msg" @input="msg = $event" /> -->
    <!-- 这个才是v-model在vue3组件上绑定的本质 -->
    <!-- <Child1 :modelValue="msg" @update:modelValue="msg = $event"/> -->
    <!-- 使用v-model写法和本质的写法是一样的 -->
    <!-- <Child1 v-model="msg"/> -->
    <!-- v-model在组件上绑定的的完整写法 -->
    <!-- <Child1 v-model:modelValue="msg" /> -->
    <!-- v-model在组件上使用绑定多个的情况 -->
    <Child1 v-model:modelValue="msg" v-model:count="count"/>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  
  export default defineComponent({
    name: "Event",
  });
</script>

<script lang="ts" setup>
import Child1 from "./Child1.vue"
import {ref} from "vue"

const msg = ref("helloword")
const count = ref(0)
</script>
